<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="format-detection" content="telephone=no">
		<title>使用FileReader对象将图片转为dataURL(base64)方法</title>
		<script>
			//选择图片时预览功能
			function imageshow(source) {
				var file = source.files[0];
				var imageid = source.id;
				if (window.FileReader) {
					var fr = new FileReader();
					fr.onloadend = function(e) {
						document.getElementById("portrait" + imageid).src = e.target.result;
					};
					fr.readAsDataURL(file); //转为base64
				}
				document.getElementById("image" + imageid).style.display = "none";
				document.getElementById("show" + imageid).style.display = "block";
			}
		</script>
	</head>
	<body>
		<h2>使用FileReader对象将图片转为dataURL(base64)方法</h2>
		<p>此方法适合图片较小情况</p>
		<div id="image1">
			<p>上传截图</p>
			<input type="file" name="screenshot1" id="1" onchange="imageshow(this)" />
		</div>
		<div id="show1" style="display:none;">
			<img src="" id="portrait1" width="100" height="70">
		</div>
		<div id="image2">
			<p>上传截图</p>
			<input type="file" name="screenshot2" id="2" onchange="imageshow(this)" />
		</div>
		<div id="show2" style="display:none;">
			<img src="" id="portrait2" width="100" height="70">
		</div>
		<div id="image3">
			<p>上传截图</p>
			<input type="file" name="screenshot3" id="3" onchange="imageshow(this)" />
		</div>
		<div id="show3" style="display:none;">
			<img src="" id="portrait3" width="100" height="70">
		</div>
	</body>
</html>
